import React from "react";

const Ts = () => {
  //器装饰;https://typescript.bootcss.com/decorators.html

  function FormatDate() {
    return function (target: any, key: any, descriptor: any) {
      //拦截该装饰器所应用属性的set方法
      descriptor.set = function (d: Date) {
        let year = d.getFullYear();
        let month = d.getMonth() + 1;
        let date = d.getDate();
        this["_" + key] = `${year}-${month}-${date}`;
      };
    };
  }
  interface User {
    name: string;
    age: number;
    [props: string]: any;
  }

  class User {
    //通过装饰器实现自动格式化时间
    @FormatDate()
    set birthday(v) {
      console.log("v", v);
      debugger;
      this._birthday = v;
    }

    get birthday(): Date {
      return this._birthday;
    }

    constructor({ name, age, birthday }: User) {
      (this.name = name), (this.age = age);

      this.birthday = birthday;
    }
  }
  let u = new User({ name: "小明", age: 18, birthday: new Date() });
  console.log(u);
  console.log(u.birthday);

  function configurable(value: boolean) {
    return function (target: any, key: string, descriptor: any) {
      descriptor.configurable = value;
      descriptor.set = function (v: any) {
        this["__" + key] = v;
      };
    };
  }
  console.log("******");
  //   装饰器二
  class Point {
    private _x: number;
    private _y: number;
    constructor(x: number, y: number) {
      this._x = x;
      this._y = y;
    }

    @configurable(true)
    get x() {
      return this._x;
    }

    @configurable(false)
    get y() {
      return this._y;
    }
  }
  const point = new Point(10, 12);
  console.log(point);

  return <div>Ts</div>;
};

export default Ts;
